<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>
            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()">
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <!--<span>群组/成员</span>-->
                    <span>{{$store.state.intercomList.channelManage.currChannel.name | limitChannelName}}</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" @click="refresh()" :class="[rotate?'go':'aa']" />
                </div>
            </TitleMenu>
        </div>
        <div class="groupMember_content" v-bind:class="{'classGreen': maskStatus}" v-loading="loading">
            <a-row id="groupMember_title_row">
                <!--切换频道图标按钮-->
                <a-col :span="8" id="groupMember_change_ico">
                    <el-button icon="el-icon-copy-document" @click="changeMask" class="ButtonMenuClass">切换频道</el-button>
                    <!--<Button type="dashed" icon="md-chatboxes" @click="changeMask" class="ButtonMenuClass">切换频道</Button>-->
                    <!--<Icon type="md-chatboxes" id="groupMember_channel_ico" @click="changeMask"/>-->
                </a-col>
                <!--频道名称-->
                <!--<a-col :span="1" id="groupMember_name_col">
                    &lt;!&ndash;群组/成员&ndash;&gt;
                </a-col>-->
                <!--查看当前用户信息-->
                <a-col :span="6" class="groupMember_add_col">
                    <el-button  @click.stop="userInfoDialogStatus=true" class="ButtonMenuClass">频道详情</el-button>
                    <!--<Button type="dashed" @click.stop="userInfoDialogStatus=true" class="ButtonMenuClass">频道详情</Button>-->
                </a-col>

                <!--根据所有人，创建临时频道组-->
                <a-col :span="6" class="groupMember_add_col">
                    <el-button  @click.stop="jumpGroupAdd($event)" class="ButtonMenuClass">单呼/群呼</el-button>
                    <!--<Button type="dashed"  @click.stop="jumpGroupAdd($event)" class="ButtonMenuClass">单呼/群呼</Button>-->
                </a-col>

                <a-col :span="3" id="groupMember_item_col" >
                    <el-dropdown trigger="click" @command="handleCommand" >
                        <span class="el-dropdown-link" >
                            <!--<a-icon type="solution" />-->
                            <i class="el-icon-more-outline" style="font-size: 7vw;margin:2vw 0 0 0 "></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item command="searchChannel">搜索频道</el-dropdown-item>
                            <el-dropdown-item command="createChannel">创建频道</el-dropdown-item>
                            <el-dropdown-item command="idleChannel">登出频道</el-dropdown-item>
                            <el-dropdown-item command="history" v-if="$store.state.intercomList.isLoginServe===true">历史消息</el-dropdown-item>
                            <el-dropdown-item command="history" v-else :disabled="true">历史消息</el-dropdown-item>
                            <!-- <el-dropdown-item command="user">我的账号</el-dropdown-item>
                            <el-dropdown-item command="addFriend">添加好友</el-dropdown-item>
                            <el-dropdown-item command="setHost">主机设置</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                </a-col>
            </a-row>

            <!--<a-row id="groupMember_search_row" >
                <a-col :span="22" :push="2" id="groupMember_search_col">
                    <div class="search_input">
                        <a-input placeholder="搜素用户名或对讲编号" style="width:75vw;height: 13vw;background: rgb(235,235,235)"
                                 v-bind:class="{'searchChangeClass':maskStatus===true}" />
                    </div>
                    <div class="search_ico">
                        <a-icon type="search" style="font-size: 8vw" />
                    </div>
                </a-col>
            </a-row>-->

            <!--成员列表-->
            <ul class="groupMember_ul"  v-scroll="onScroll" v-if="isShowFooter===true">
                <li v-if="$store.state.intercomList.channelManage.channelAllMember.length===0">
                    <a-row class="ch_search_result" >
                        <a-col :span="24" class="ch_search_result_c1_null">
                            频道为空...
                        </a-col>
                    </a-row>
                </li>
                <li class="groupMember_li" v-else v-for="item in $store.state.intercomList.channelManage.channelAllMember">
                    <a-row class="groupMember_ul_row">
                        <a-col :span="4" class="groupMember_li_left" v-if="item.id===String($store.state.intercomList.memberManage.currMember.iId)">
                            <div class="groupMember_li_ico" style="font-size: 10vw">
                                <!--<img src="./../assets/drawable-mdpi/avatar.png"  width="51" height="50" >-->
                                <i class="el-icon-user" size="48" style="color: dodgerblue"></i>
                                <!--<Icon type="ios-contact-outline" size="48" style="color: dodgerblue"/>-->
                            </div>
                        </a-col>
                        <a-col :span="4" class="groupMember_li_left" v-else>
                            <div class="groupMember_li_ico" style="font-size: 10vw">
                                <i class="el-icon-user" ></i>
                                <!--<Icon type="ios-contact-outline" size="48"/>-->
                            </div>
                        </a-col>

                        <a-col :span="15" class="groupMember_li_center" v-if="item.id===String($store.state.intercomList.memberManage.currMember.iId)">
                            <div class="groupMember_li_topText" style="color: dodgerblue">
                                {{item.name}}
                            </div>
                            <div class="groupMember_li_bottomText" style="color: dodgerblue">
                                {{item.id}}
                            </div>
                        </a-col>

                        <a-col :span="15" class="groupMember_li_center" v-else>
                            <div class="groupMember_li_topText" >
                                {{item.name}}
                            </div>
                            <div class="groupMember_li_bottomText">
                                {{item.id}}
                            </div>
                        </a-col>

                        <a-col :span="5" class="groupMember_li_right">
                            <div @click="getUserInfo(item)">
                                <div class="groupMember_li_rightText" v-if="item.status">
                                    <span >在线</span>
                                    <a-icon type="right" />
                                </div>
                                <div class="groupMember_li_rightText" style="color: rgba(136,136,136,0.35);" v-else>
                                    <span >离线</span>
                                    <a-icon type="right" />
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </li>
            </ul>
        </div>
        <!--切换频道的自己写的自定义遮罩-->
        <div class="changeGroup_mask" v-if="maskStatus===true">
            <div class="c_group_title">
                <div class="c_group_title_cancel" @click="closeMask">
                    <Button style="font-size: 5.5vw">取消</Button>
                </div>
                <div class="c_group_title_name">
                    切换群组
                </div>
                <div class="c_group_title_sure" @click="joinChannelSure">
                    <Button style="font-size: 5vw">进入频道</Button>
                </div>
            </div>
            <ul class="c_group_item_ul" v-scroll="onScroll">
                <li class="c_group_item_li" v-for="(item,index) in $store.state.intercomList.channelManage.allChannel" :key="index" >
                    <a-row >
                        <a-col :span="17" style="text-align: center">
                            <div @click="joinChannel(index,item.id)">{{item.name}}
                                <span style="font-size: 4.5vw">{{item.id}}</span>
                                <span style="font-size: 4.5vw">({{item.userCount}}/{{item.memberCount}})</span>
                            </div>
                        </a-col>
                        <a-col :span="7"  style="text-align: left;" v-if="$store.state.intercomList.memberManage.currMember.iId ===item.creatorId && item.isTemporary === false">
                            <Tooltip content="管理频道" placement="bottom-start" theme="light">
                                <Button style="font-size: 5vw;padding: 0.5vw 1.5vw 0.5vw" @click="openChannelInfoDialog(item,true)">
                                    <Icon type="ios-ionitron-outline" size="20" style="color: dodgerblue;margin-bottom: 0.5vw"/>
                                    <span>管理</span>
                                </Button>
                            </Tooltip>
                        </a-col>
                        <!--普通成员查看频道信息-->
                        <a-col :span="7"  style="text-align: left;" v-if="$store.state.intercomList.memberManage.currMember.iId !==item.creatorId && item.isTemporary === false">
                            <Tooltip content="查看频道" placement="bottom-start" theme="light">
                                <Button style="font-size: 5vw;padding: 0.5vw 1.5vw 0.5vw" @click="openChannelInfoDialog(item,false)">
                                    <Icon type="ios-expand" size="20" style="margin-bottom: 0.5vw"/>
                                    <span>查看</span>
                                </Button>
                            </Tooltip>
                        </a-col>
                    </a-row>
                </li>
            </ul>
        </div>

        <!-- dialog Form -->
        <el-dialog title="创建频道" :visible.sync="dialogStatus" width="90vw" top="5vw" custom-class="createChannelDialog">
            <el-form :model="form" v-loading="dialogLoading">
                <!--<el-form-item label="频道名称" :label-width="formLabelWidth"></el-form-item>-->
                <el-form-item>
                    <el-input v-model="form.channelName" auto-complete="off" placeholder="频道名称"
                              clearable autofocus="true" v-focus></el-input>
                </el-form-item>

                <el-form-item>
                    <div style="width: 90%;float: left">
                        <el-input v-model="form.channelPassword" auto-complete="off" placeholder="默认无密码,最大4位"
                                  maxlength="4" clearable onkeyup="this.value=this.value.replace(/[^\d]/g,'')" :disabled="disabled">
                        </el-input>
                    </div>
                    <div style="width: 10%;float: left">
                        <span v-if="disabled===true"><Icon type="ios-lock-outline" style="font-size: 8vw" @click="disabled = !disabled"/></span>
                        <span v-else><Icon type="ios-unlock-outline" style="font-size: 8vw" @click="disabled = !disabled"/></span>
                    </div>

                    <!-- <Button type="primary" @click="disabled = !disabled"></Button>-->
                </el-form-item>

                <el-form-item style="width:80vw; height: 40px;line-height: 40px;padding: 0;text-align: left">
                    <a-checkbox v-model="form.isSearch">公开频道(允许其他人搜索到)</a-checkbox>
                </el-form-item>
                <el-form-item style="width:80vw; height: 40px;line-height: 40px;padding: 0;text-align: left">
                    <a-checkbox v-model="form.isCheck=true" :disabled="true">新成员加入需群主审核</a-checkbox>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="createChannelCancle">取 消</el-button>
                <el-button type="primary" @click="createChannelSure">确 定</el-button>
            </div>
        </el-dialog>

        <!--查看当前对讲用户的信息-->
        <el-dialog title="当前频道详情" :visible.sync="userInfoDialogStatus" width="90vw" top="42vw" custom-class="createChannelDialog">
            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">对讲编号：</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.iId}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">对讲名称:</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.name||$store.state.intercomList.memberManage.currMember.nick}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">频道编号</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.channel.id}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">频道名称</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.channel.name | limitChannelName}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">创建编号</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.channel.creatorId | orCreatorId}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">创建者</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{$store.state.intercomList.memberManage.currMember.channel.creatorNick | orCreatorNick}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="6">临时频道</el-col>
                <el-col class="gm_colValue" :span="6">{{$store.state.intercomList.memberManage.currMember.channel.isTemporary | orIsTemporary}} </el-col>
                <el-col class="gm_colName" :span="6">公开频道</el-col>
                <el-col class="gm_colValue" :span="6">{{$store.state.intercomList.memberManage.currMember.channel.searchable | orSearchable}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="6">成员数量</el-col>
                <el-col class="gm_colValue" :span="6">{{$store.state.intercomList.memberManage.currMember.channel.userCount}}</el-col>
                <el-col class="gm_colName" :span="6">在线人数</el-col>
                <el-col class="gm_colValue" :span="6">{{$store.state.intercomList.memberManage.currMember.channel.memberCount}}</el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userInfoDialogStatus=false">确 定</el-button>
            </div>
        </el-dialog>

        <!--查看某个用户的信息dialog-->
        <el-dialog title="成员信息" :visible.sync="getUserInfoDialogStatus" width="90vw" top="42vw" custom-class="createChannelDialog">
            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">用户编号：</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{oneUserInfo.id}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">用户名称:</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{oneUserInfo.name||oneUserInfo.nick}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">用户状态:</el-col>
                <el-col class="gm_colValue" :span="15" :push="2">{{oneUserInfo.status | orUserStatus}}</el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getUserInfoDialogStatus=false">确 定</el-button>
            </div>
        </el-dialog>

        <!--查看某个频道的信息-->
        <el-dialog title="频道信息" :visible.sync="getChannelInfoDialogStatus" width="90vw" top="42vw" custom-class="createChannelDialog">
            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">频道编号：</el-col>
                <el-col class="gm_colValue" :span="17">{{oneChannelInfoForm.id}}</el-col>
            </el-row>

            <el-row class="gm_row">
                <el-col class="gm_colName" :span="7">创建用户:</el-col>
                <el-col class="gm_colValue" :span="17">{{oneChannelInfoForm.creatorNick}}</el-col>
            </el-row>

            <el-row class="gm_row" style="height: 12vw;line-height: 12vw;">
                <el-col class="gm_colName" :span="7">频道名称:</el-col>
                <el-col class="gm_colValue" :span="17">
                    <el-input v-model="oneChannelInfoForm.name"  placeholder="频道名称" clearable v-if="isCreator"></el-input>
                    <el-input v-model="oneChannelInfoForm.name"  placeholder="频道名称" clearable v-else :disabled="true"></el-input>
                </el-col>
            </el-row>
            <el-row class="gm_row" style="height: 12vw;line-height: 12vw;">
                <el-col class="gm_colName" :span="7">频道密码:</el-col>
                <el-col class="gm_colValue" :span="17">
                    <el-input v-model="oneChannelInfoForm.pwd"  placeholder="不填或最大4位数字" clearable v-if="isCreator" maxlength="4"
                              onkeyup="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
                    <el-input v-model="oneChannelInfoForm.pwd"  placeholder="不填或最大4位数字" clearable v-else :disabled="true" maxlength="4"></el-input>
                </el-col>
            </el-row>

            <el-row class="gm_row" >
                <el-col class="gm_colName" :span="12" style="text-align: center">
                    <Button icon="ios-trash-outline" v-if="isCreator" @click="removeChannel">删除频道</Button>
                    <Button icon="ios-trash-outline" v-else @click="quitChannel">退出频道</Button>
                </el-col>
                <el-col class="gm_colName" :span="12">
                    <Button type="info" icon="ios-search" @click="selectChannelMember(oneChannelInfoForm.id,oneChannelInfoForm.name,isCreator)">成员列表</Button>
                </el-col>
            </el-row>

            <el-row class="gm_row" >
                <el-col class="gm_colName" :span="24">
                    <a-checkbox v-model="oneChannelInfoForm.searchable" v-if="isCreator">公开频道(允许其他人搜索到)</a-checkbox>
                    <a-checkbox v-model="oneChannelInfoForm.searchable" v-else :disabled="true">公开频道(允许其他人搜索到)</a-checkbox>
                </el-col>
            </el-row>
            <el-row class="gm_row">
                <el-col class="gm_colName" :span="24">
                    <a-checkbox v-model="oneChannelInfoForm.needApply=true" :disabled="true">新成员加入需群主审核</a-checkbox>
                </el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button @click="getChannelInfoDialogStatus = false">取 消</el-button>
                <el-button type="primary" v-if="isCreator" @click="updateChannelInfo" >确 定</el-button>
                <el-button type="primary" v-else @click="getChannelInfoDialogStatus = false">确 定</el-button>
            </div>
        </el-dialog>

        <FooterChaanel v-if="isShowFooter===true"></FooterChaanel>
    </div>
</template>
<style>
    .gm_colName{
        text-align: left;
    }
    .gm_colValue{
        text-align: left;
    }
    .gm_row{
        margin: 2vw 0 2vw 0;
        font-size: 4.5vw;
    }
    .createChannelDialog>.el-dialog__body{
        padding: 0 20px;
    }
    .createChannelDialog>.el-dialog__body>.el-form>.el-form-item{
        margin-bottom: 5px;
    }
    .createChannelDialog>.el-dialog__footer{
        padding: 0 10vw 2vw 10vw;
        text-align: center;
    }
    .el-collapse-item__header{
        width: 100vw;
        height: 12vw;
        line-height: 12vw;
        background: rgb(164, 200, 232);
        font-size: 5vw;
        font-family: "Microsoft Yahei", serif;
        font-weight:400;
        text-align: left;
        padding-left: 4vw;
    }
    .aUserInfo{
        height: 11vw;
        line-height: 11vw;
        width: 96vw;
        margin-left: 2vw;
        text-align: left;
    }
    .collapseItemClass>.el-collapse-item__wrap>.el-collapse-item__content{
        padding-bottom:0 !important;
        width: 96vw;
        height: 11vw;
        line-height: 11vw;
        text-align: left;
        margin-left: 2vw;
    }
    #groupMember_title_row{
        width: 100vw;
        height: 12.50vw;
        line-height: 12.50vw;
        padding:0 2vw 0 2vw;
    }
 .groupMember_content{
     background: rgb(237,237,237);
     width: 100vw;
     height: calc(100vh - 66vw);
     z-index: 10;
 }
 #groupMember_change_ico{
     height: 12.50vw;
     line-height: 12.50vw;
 }
 #groupMember_channel_ico{
     font-size: 9vw;
     height: 12.50vw;
     width: 12.50vw;
     line-height: 12.50vw;
     /*padding: 1vw 0 1vw 0 ;*/
 }
 #groupMember_name_col{
     height: 12.50vw;
     font-size: 6vw;
     line-height: 12.50vw;
     generic-family:Microsoft YaHei;
 }
 .groupMember_number_add_ico{
     font-size: 7vw;
     height: 12.50vw;
     line-height: 12.50vw;
     padding: 1vw 0 1vw 0 ;
}
 .ButtonMenuClass {
     font-size: 5vw !important;
     height: 11vw !important;;
     line-height: 10vw !important;;
     padding: 0 2vw 1vw 1vw !important;;
 }
 #groupMember_search_row{
     height: 13.75vw;
     line-height: 13.75vw;
     text-align: center;
 }
 #groupMember_search_col{
     text-align: center;
     height: 12vw;
     line-height: 12vw;
 }

 .search_input{
     float: left;
     width: 80vw;
     height: 13vw;
     line-height: 13vw;
     padding: 0;
 }

 .search_ico{
     float: left;
     width: 8vw;
     height: 14vw;
     line-height: 14vw;
     font-size: 7vw;
     text-align: left;
 }
 #search_input input{
     border: 0.2vw silver solid;
     height: 10vw;
     line-height: 10vw;
 }
 .groupMember_ul{
     padding: 0;
     margin: 0;
     width: 100vw;
     height: calc(100vh - 78.5vw);
     overflow: scroll;
 }
 .groupMember_li  {
     width: 96vw;
     height: 16vw;
     line-height: 16vw;
     margin:0 ;
     float: left;
     list-style: none;
 }
 .groupMember_ul_row{
     width: 96vw;
     height: 16vw;
 }
 .groupMember_li_left{
     height: 16vw;
 }
 .groupMember_li_ico{
     width: 16vw;
     height: 16vw;
 }
 .groupMember_li_center{
     height: 16vw;
     text-align: left;
 }
 .groupMember_li_topText{
     height: 9vw;
     line-height: 9vw;
     generic-family: Microsoft Yahei;
     font-size: 5.5vw;
     color: black;
 }
 .groupMember_li_bottomText{
     height: 7vw;
     line-height: 7vw;
     generic-family: Microsoft Yahei;
     font-size: 4vw;
     color: #8B8B8D;
 }
 .groupMember_li_right{
     height: 16vw;
     /*width: 18vw;*/
     line-height: 16vw;
     text-align: left;
     font-size: 3vw;
     generic-family: Microsoft Yahei;
     color: #8F8F8F;
 }
 .groupMember_li_rightText{
     font-size: 5.5vw;
     padding-right: 0.5vw;
     /*color: rgb(88, 233, 103);*/
     color: rgb(50,50,50);
 }
    /*
    以下是自定义遮罩的css
     */
    .classGreen{
        /*上方界面变灰*/
        background: rgba(0,0,0,0.4);
        z-index: 10;
        pointer-events:none;/*给遮罩层上添加这个属性即可，防止遮罩层点击穿透，触发到确认按钮*/
    }
    .changeGroup_mask{
        padding:  0 ;
        width: 100vw;
        height: 45vh;
        background: rgb(250,250,250);
        z-index: 1000;
        top: 55vh;
        left: 0;
        position: absolute;
    }
    .c_group_title{
        width: 100vw;
        height: 7vh;
        float: left;
        font-family: "Microsoft Yahei", serif;
        padding: 1vw 2vw 0 2vw;
    }
    .c_group_title_cancel{
        width: 16vw;
        height: 7vh;
        line-height: 7vh;
        float: left;
        color: deepskyblue;
        font-size: 5.5vw;
        font-weight: 500;
        text-align: left;
    }
    .c_group_title_name{
        width: 50vw;
        height: 7vh;
        line-height: 7vh;
        float: left;
        color: black;
        font-size: 6.5vw;
        text-align: center;
    }
    .c_group_title_sure{
        width: 30vw;
        height: 7vh;
        line-height: 7vh;
        float: left;
        color: deepskyblue;
        font-size: 5.5vw;
        font-weight: 500;
        text-align: right;

    }
    .c_group_item_ul{
        overflow: auto;
        width: 100vw;
        height: 38vh;
        text-align: center;
        font-size: 6vw;
        padding: 2vw 2vw 0 2vw;
    }
    .c_group_item_li{
        width: 100vw;
        height: 10vw;
        list-style: none;
        margin: 1vw 0 1vw 0;
    }
    .c_group_item_li:hover{
        list-style: none;
        font-size: 7vw;
    }
    .groupMember_add_col{
        margin: 0 1vw 0 1vw;
    }
</style>
<script>
    import TitleTop from '../../components/TitleTop'
    import TitleMenu from '../../components/TitleMenu'
    import FooterChaanel from '../../components/FooterChaanel'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import axios from "axios";
    export default {
        name: "GroupMember",
        components:{ACol, ARow, TitleTop,TitleMenu,FooterChaanel},
        inject:['reload'],
        data() {
            return {
                msg: 'hello vue',
                isShowFooter:true,
                screenHeight: window.innerHeight,
                activeNames: ['1'],
                allChannel:this.$store.state.intercomList.channelManage.allChannel,
                channelOnlineMember:this.$store.state.intercomList.channelManage.channelOnlineMember,
                expanded:'',
                adapterList:[],//将所有频道和在线频道适配起来
                channelMemberList:this.$store.state.intercomList.channelManage.channelAllMember,//当前频道所有人员的拼凑数据 未启用
                currChannel:this.$store.state.intercomList.channelManage.currChannel,//当前频道的数据 可以当当前频道的所有人信息来用
                maskStatus:false,//遮罩开关
                rotate:false,
                loading:false,
                addAllUser:[
                    {
                        "creatorId":1001001,
                        "creatorNick":"user1",
                        "id":1002,
                        "isTemporary":false,
                        "memberCount":3,
                        "name":"group2",
                        "searchable":true,
                        "userCount":1,
                        "onlineMember":[
                            {
                                "channel":{
                                    "creatorId":1001001,
                                    "creatorNick":"user1",
                                    "id":1002,
                                    "isTemporary":false,
                                    "memberCount":3,
                                    "name":"group2",
                                    "searchable":true,
                                    "userCount":1
                                },
                                "iId":1001002,
                                "isCurrent":true,
                                "isLocalTalking":false,
                                "isTalking":false,
                                "name":"user2",
                                "nick":"user2",
                                "session":7
                            },
                            {
                                "id":"1001001",
                                "name":"user1"
                            },
                            {
                                "id":"1001003",
                                "name":"user3"
                            }
                        ]
                    }
                ],//初始默认群组所有人员的数据
                chooseChannelId: "",//切换频道时选择的频道id
                dialogStatus:false,//element dialog
                userInfoDialogStatus:false,//用户信息的dialog
                getUserInfoDialogStatus:false,//查看某个用户信息的dialog
                getChannelInfoDialogStatus:false,//查看某个频道信息的dialog
                isCreator:false,//查看某个频道信息的dialog传入的是否频道创建者
                oneChannelInfoForm:{
                    "allowOrderBg":false,
                    "creatorId":null,
                    "creatorNick":"",
                    "expanded":-1,
                    "id":null,
                    "isTemporary":false,
                    "memberCount":null,
                    "monitors":"",
                    "mutes":"",
                    "name":"",
                    "needApply":false,
                    "priors":"",
                    "pwd":"",
                    "searchable":true,
                    "userCount":null
                },//某个频道的信息的表单内容
                form: {
                    channelName: '',
                    channelPassword: null,
                    isSearch:true,
                    isCheck:false,
                },
                disabled: true,
                dialogLoading:false,
                currMember:this.$store.state.intercomList.memberManage.currMember,
                oneUserInfo:{"id":'',"name":'',status:false},
            }
        },
        computed: {
            currOnlineMember() {
               /* let key1=0;
                for(let key in this.channelOnlineMember){
                    console.log(key);
                    key1+=key;
                }
                return key1;*/
                //return this.allChannel.find(t=> t.id === this.currOnlineMemberList);
            },

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){
            window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
            window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
        },
        methods:{
            selectChannelMember(cId,cName,isCreator){
                /*根据频道cId编号跳转到查询频道所有成员，可以进行成员移除 成员添加*/
                let me = this;
                me.$router.push({name:'manageChannel',params:{cId,cName,isCreator}});

                /*let success = function(result){
                    console.log(result);
                    me.$router.push("/manageChannel")//跳转到成员列表页面
                };
                let fail = function(e){
                    console.log(e);
                    me.$toast("查看频道成员列表失败","short","bottom",-100);
                };

                let options = {
                    channelId:cId,//int
                    currentPageId:0,//int 当前当前页面的id 0页 展示10条，在成员页面需要翻页功能，翻页则+1代表从11条-20...
                };
                if(typeof (Intercom)==="undefined"){
                    me.$router.push("/manageChannel")//跳转到成员列表页面
                }else{
                    Intercom.getChannelAllMember(success,fail,options);
                }*/


            },
            updateChannelInfo(){
                if(this.oneChannelInfoForm.id===null){
                    this.$toast("修改频道编号无效","short","bottom",-100);
                }else if(this.oneChannelInfoForm.name===""){
                    this.$toast("频道名称不能为空","short","bottom",-100);
                }else if(0<this.oneChannelInfoForm.pwd.length && this.oneChannelInfoForm.pwd.length<4){
                    this.$toast("密码设置4位数字或不设置","short","bottom",-100);
                }
                else{
                    let me = this;
                    let success = function(result){
                        console.log(result);
                        me.getChannelInfoDialogStatus = false;//关闭dialog
                    };
                    let fail = function(e){
                        console.log(e);
                        me.$toast("修改频道失败","short","bottom",-100);
                    };

                    let options = {
                        channelId:me.oneChannelInfoForm.id,
                        newName:me.oneChannelInfoForm.name,
                        newPwd:me.oneChannelInfoForm.pwd,
                        newPub:me.oneChannelInfoForm.searchable,
                    };
                    Intercom.updateChannelInfo(success,fail,options);
                }
            },
            openChannelInfoDialog(channelInfo,isCreator){
                if(channelInfo!==null){
                    //消除引用带来的影响，输入框修改未提交也能改变频道名称或者密码的bug
                    this.isCreator = isCreator;
                    this.oneChannelInfoForm.creatorId = channelInfo.creatorId ;
                    this.oneChannelInfoForm.id = channelInfo.id ;
                    this.oneChannelInfoForm.creatorNick = channelInfo.creatorNick ;
                    this.oneChannelInfoForm.name = channelInfo.name ;
                    this.oneChannelInfoForm.needApply = channelInfo.needApply ;
                    this.oneChannelInfoForm.priors = channelInfo.priors ;
                    this.oneChannelInfoForm.pwd = channelInfo.pwd ;
                    this.oneChannelInfoForm.searchable = channelInfo.searchable ;
                    this.oneChannelInfoForm.userCount = channelInfo.userCount ;
                    this.oneChannelInfoForm.allowOrderBg = channelInfo.allowOrderBg ;
                    this.oneChannelInfoForm.expanded = channelInfo.expanded ;
                    this.oneChannelInfoForm.isTemporary = channelInfo.isTemporary ;
                    this.oneChannelInfoForm.memberCount = channelInfo.memberCount ;
                    this.oneChannelInfoForm.monitors = channelInfo.monitors ;
                    this.oneChannelInfoForm.mutes = channelInfo.mutes ;

                    this.getChannelInfoDialogStatus = true;
                }
            },
            getUserInfo(oneUserInfo){
                //查看某个用户的信息
                this.oneUserInfo = oneUserInfo;
                this.getUserInfoDialogStatus = true;
            },
            createChannelCancle(){
                this.dialogStatus = false;//关闭dialog
            },
            createChannelSure(){
                if(this.form.channelName===""){
                    this.$toast("请输入频道名称","short","bottom",-80);
                }else{
                    this.dialogLoading = true;//打开loading
                    setTimeout(()=> {
                        this.dialogLoading = false;//关闭loading
                        this.dialogStatus = false;//关闭dialog
                    }, 1000);
                    if(typeof (Intercom)!=="undefined"){
                        let me = this;
                        let success = function(result){
                            console.log(result);
                            me.dialogLoading = false;//关闭loading
                            me.dialogStatus = false;//关闭dialog

                        };
                        let fail = function(e){
                            console.log(e);
                            me.dialogLoading = false;//关闭loading
                            me.dialogStatus = false;//关闭dialog
                            me.$toast("创建频道失败","short","bottom",-80);
                        };
                        let options = {
                            title:me.form.channelName,
                            pwd:me.form.channelPassword,
                            members:'',
                            searchable:me.form.isSearch,
                            needapplyChecked: me.form.isCheck,
                            tmp:false,//默认不为临时频道
                        };
                        Intercom.createChannel(success,fail,options);
                    }
                }

            },
            handleCommand(command) {
                console.log(command);
                if("searchChannel" === command){
                    this.$router.push("/searchChannel");
                }else if("createChannel" === command){
                    this.dialogStatus = true;
                }else if("idleChannel" === command){
                    this.joinIdleChannel();
                }else if("history" === command){
                    this.selectHistory();
                }
                /*else if("user" === command){

                }
                else if("addFriend" === command){

                }else if("setHost" === command){

                }*/

            },
            adapter(){
                let me = this;
                //循环所有频道在线人员等，设计到数据结构，所以先根据key值去遍历，再去适配，将适配到的数据放进allChannel的属性
                let adapter_channelOnlineMember = me.$store.state.intercomList.channelManage.channelOnlineMember;
                me.adapterList = me.$store.state.intercomList.channelManage.allChannel;
                console.log("me.adapterList start",me.adapterList);
                console.log("进入adpter for方法前的当前频道",me.currChannel);
                for(let key in adapter_channelOnlineMember){
                    if(adapter_channelOnlineMember[key].length>0){
                        adapter_channelOnlineMember[key].forEach(function(element){
                            let userChannelIndex = -1;//索引匹配不到返回-1
                            //由于另一个数据是返回的"channel":{"$ref":"$[1002][0].channel"},相同的需要取一个值判断类型即可，根据这个值取适配allChannel
                            if(element.channel.id!==undefined ||typeof (element.channel.id)!=="undefined"){
                                //根据在线人员的所属频道号，匹配到全部频道的具体频道上，将在线人员信息放到具体频道里面
                                userChannelIndex = me.$store.state.intercomList.channelManage.allChannel.findIndex(t=> t.id ===element.channel.id );
                                if(userChannelIndex>=0){
                                    //匹配到非乱码的，把在线人数和总共人数也同步到adapterList上
                                    me.adapterList[userChannelIndex].memberCount = element.channel.memberCount;
                                    me.adapterList[userChannelIndex].userCount = element.channel.userCount;
                                    me.adapterList[userChannelIndex].onlineMember = [];
                                    //只要是匹配到了，就依次把各个在线人员数据加进全部频道里面去
                                    adapter_channelOnlineMember[key].forEach(function(element){
                                        me.adapterList[userChannelIndex].onlineMember.push(element) ;
                                    })
                                }
                            }
                        })
                    }
                }
                console.log("me.adapterList String",JSON.stringify(me.adapterList));
                /*let hasOnlineGroup = me.adapterList.filter(t => t.hasOwnProperty('onlineMember'));//JSON 查找属性 找出有在线人数的群组[{},{}]
                console.log(hasOnlineGroup);
                for(let i = 0;i<hasOnlineGroup.length;i++){
                    me.addAllUser = hasOnlineGroup[i].onlineMember ;
                    console.log("开始放入在线人员的addAllUser",me.addAllUser);
                }*/

                me.addAllUser = me.adapterList.filter(t => parseInt(t.id) === me.currChannel.id);//当前频道的在线人员 原来number me.currChannel.id，这里改变引用

                //a-(重合部分)，即求a的差集
                let lessArr = me.channelMemberList.filter(x => me.addAllUser[0].onlineMember.every(y => parseInt(y.iId) !== parseInt(x.id)));
               /* console.log("lessArr", lessArr);
                console.log("me.addAllUser1",me.addAllUser[0].onlineMember);*/
                me.addAllUser[0].onlineMember.push.apply(me.addAllUser[0].onlineMember,lessArr);//将b数组放入a数组

            },
            joinChannel(index,channelId){
                //点击了item就赋值给data
                let me = this;
                console.log("index",index);
                me.chooseChannelId = channelId;
                console.log(me.chooseChannelId);
            },
            joinChannelSure(){
                //切换频道点击确定按钮
                let me = this;
                if(me.chooseChannelId!==""){
                    let ok = function(result){
                        console.log("joinChannel",result);//稍后将进入频道
                    };
                    let fail = function(e){
                        console.log(e);
                    };
                    let options = {
                        channelId:me.chooseChannelId
                    };
                    if(typeof (Intercom)!=="undefined"){
                        Intercom.enterChannel(ok,fail,options);
                        me.chooseChannelId = "";//置空
                        me.maskStatus = false;//关闭遮罩
                    }

                }else {
                    me.$toast("请点击切换频道","short","bottom",-80);
                }

            },
            handleChange(val) {
                console.log(val);
                console.log(val[val.length-1])
            },
            onSearch (value) {
                console.log(value)
            },
            keyboardShowHandler(e){
                /*console.log(e.keyboardHeight);*/
                this.isShowFooter = false;
            },
            keyboardHideHandler(e){
                this.isShowFooter = true;
            },
            onScroll(){
                this.handleScroll;
            },
            jumpBack(){
                this.clickButton();
                this.$router.push({name:'homework'});
            },
            refresh(){
                this.clickButton();
                let me = this;
                me.rotate=!me.rotate;
                me.loading = true;
                setTimeout(function() {
                    me.reload();
                    me.loading = false;
                },1000)
            },
            changeMask(){
                this.maskStatus = true;
                this.chooseChannelId = '';
            },
            closeMask(){
                this.maskStatus = false;
            },
            jumpGroupAdd(e){
                e.returnValue = false;
                this.$router.push('/groupMember/groupAdd');

            },
            quitChannel(){
              //退出频道
                let me =this;
                let success = function(result){
                    console.log(result);
                    me.getChannelInfoDialogStatus = false;
                    me.maskStatus = false;
                };
                let fail = function(error){
                    console.log(error);
                };
                let options = {
                    channelId:me.oneChannelInfoForm.id
                };
                Intercom.quitChannel(success,fail,options);
            },
            removeChannel(){
                //管理员删除频道
                this.$apiIntercom.removeChannel(this.oneChannelInfoForm.id).then(result => {
                    let data = result.data;
                    if (data.code === 200) {
                        console.log("移除频道成功");
                        //this.$toast("移除频道成功","short","bottom",-100);
                        this.getChannelInfoDialogStatus = false;
                        this.maskStatus = false ;
                    }else{
                        return;
                    }
                }).catch(e =>{
                    console.log(e);
                });
            },
            joinIdleChannel(){
                let me = this;
                let success = function(result){
                    console.log("回到空闲频道成功",result);
                    /*me.$toast("添加频道成功","short","top",80);*/
                };
                let fail = function(e){
                    console.log("回到空闲频道失败",e);
                    me.$toast("回到空闲频道失败","short","top",80);
                };
                let options ={
                    channelId :"0",
                };
                if(typeof (Intercom)!=="undefined"){
                    Intercom.enterChannel(success,fail,options);
                }
            },
            selectHistory(){
                let success = function(result){
                    console.log(result);
                };
                let fail = function(e){
                    console.log("调用其他方法失败",e);
                };
                let options ={
                    otherFunction :"selectHistory",
                };
                if(typeof (Intercom)!=="undefined"){
                    Intercom.otherFunction(success,fail,options);
                }
            },

        },
        filters:{
            limitChannelName(value){
                if(value==="Idle"){
                    value = "空闲频道";
                }
                if(!value) return '';
                if(value.length>8){
                    return value.slice(0,9)+'...';
                }
                return value;
            },
            orCreatorId(value){
                if(!value||value===""||value===0){
                    return "系统创建"
                }
                return value;
            },
            orCreatorNick(value){
                if(!value||value===""){
                    return "系统创建"
                }
                return value;
            },
            orIsTemporary(value){
                if(value) return "是";
                else return  "否";
            },
            orSearchable(value){
                if(value) return "可被搜索";
                else return  "不可搜索";
            },
            orUserStatus(value){
                if(value) return "在线";
                else return  "离线";
            },
        }
    }
</script>

